{% extends 'base.html' %}

{% block title %}首页 - AI学习智能体门户{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 英雄区域 -->
    <div class="row bg-primary text-white py-5">
        <div class="col-lg-8 mx-auto text-center">
            <h1 class="display-4 fw-bold mb-4">
                <i class="fas fa-robot me-3"></i>AI学习智能体门户
            </h1>
            <p class="lead mb-4">
                与AI智能体一起学习，让知识获取更加高效、有趣和个性化
            </p>
            {% if not user.is_authenticated %}
            <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                <a href="{% url 'users:register' %}" class="btn btn-light btn-lg me-md-2">
                    <i class="fas fa-user-plus me-2"></i>立即注册
                </a>
                <a href="{% url 'users:login' %}" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-sign-in-alt me-2"></i>登录
                </a>
            </div>
            {% else %}
            <a href="{% url 'users:dashboard' %}" class="btn btn-light btn-lg">
                <i class="fas fa-tachometer-alt me-2"></i>进入仪表板
            </a>
            {% endif %}
        </div>
    </div>

    <!-- 功能特色 -->
    <div class="container py-5">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">为什么选择我们？</h2>
                <p class="text-muted">我们提供全方位的AI辅助学习解决方案</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                            <i class="fas fa-robot fa-2x"></i>
                        </div>
                        <h5 class="card-title">智能体助手</h5>
                        <p class="card-text text-muted">
                            创建个性化的AI学习助手，根据您的学习风格和目标提供定制化的指导
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                            <i class="fas fa-graduation-cap fa-2x"></i>
                        </div>
                        <h5 class="card-title">智能学习</h5>
                        <p class="card-text text-muted">
                            AI驱动的课程推荐和学习路径规划，让您的学习更加高效有序
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                            <i class="fas fa-book fa-2x"></i>
                        </div>
                        <h5 class="card-title">知识管理</h5>
                        <p class="card-text text-muted">
                            智能知识库管理，快速检索和组织您的学习资料
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据统计 -->
    <div class="bg-light py-5">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3">
                    <h3 class="fw-bold text-primary">1000+</h3>
                    <p class="text-muted">活跃用户</p>
                </div>
                <div class="col-md-3">
                    <h3 class="fw-bold text-primary">500+</h3>
                    <p class="text-muted">智能体</p>
                </div>
                <div class="col-md-3">
                    <h3 class="fw-bold text-primary">200+</h3>
                    <p class="text-muted">课程</p>
                </div>
                <div class="col-md-3">
                    <h3 class="fw-bold text-primary">10000+</h3>
                    <p class="text-muted">学习时长(小时)</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 如何开始 -->
    <div class="container py-5">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">如何开始？</h2>
                <p class="text-muted">三步即可开启您的AI学习之旅</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4 text-center">
                <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 48px; height: 48px;">
                    <span class="fw-bold">1</span>
                </div>
                <h5>注册账户</h5>
                <p class="text-muted">创建您的专属学习账户</p>
            </div>
            
            <div class="col-md-4 text-center">
                <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 48px; height: 48px;">
                    <span class="fw-bold">2</span>
                </div>
                <h5>创建智能体</h5>
                <p class="text-muted">配置您的AI学习助手</p>
            </div>
            
            <div class="col-md-4 text-center">
                <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 48px; height: 48px;">
                    <span class="fw-bold">3</span>
                </div>
                <h5>开始学习</h5>
                <p class="text-muted">享受个性化的学习体验</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}